<template>
  <div class="flow">
    <div class="formLook">
      <div class="firstTitle" >
        <div class="icon" @click="$GoBack()">
          <el-icon>
            <ArrowLeft />
          </el-icon>
        </div>
        <div class="topTitle">招聘需求明细</div>
        <div
          :class="[
            'status-tag',
            ruleForm.jobStatus === 0 ? 'recruiting' : 'closed',
          ]"
        >
          {{ ruleForm.jobStatus === 0 ? "招聘中" : "关闭中" }}
        </div>
      </div>
      <el-divider />

      <div class="needNotes">
        <div class="title_line">
          <div class="title_img">
            <img src="@/assets//images/demand.png" alt="" />
          </div>
          <p class="title">需求信息</p>
        </div>
        <div></div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          class="demo-neekWorksForm"
          status-icon
          style="margin-left: 20px"
          label-position="top"
        >
          <el-form-item
            label="岗位需求描述:"
            prop="requireJobOverview"
            label-position="top"
          >
            <el-input
              :disabled="isDisabled"
              placeholder="请输入岗位需求描述"
              v-model="ruleForm.requireJobOverview"
            />
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="需求申请人:" prop="name">
                <el-input
                  v-model="ruleForm.requireProposerName"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="需求部门:" prop="department">
                <el-input
                  v-model="ruleForm.requireDeptName"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="申请时间:" prop="time">
                <el-input
                  v-model="ruleForm.proposeTime"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="HR:" prop="personnel">
                <el-input v-model="ruleForm.hrName" :disabled="isDisabled" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="needNotesJob">
        <div class="title_lineJob">
          <div class="title_line">
            <div class="title_img">
              <img src="@/assets//images/demand.png" alt="" />
            </div>
            <p class="title">岗位信息</p>
          </div>
        </div>

        <!-- 岗位信息表单 -->
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-neekWorksForm"
          status-icon
          style="margin-left: 20px"
          label-position="top"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="岗位名称:" prop="name">
                <el-input v-model="ruleForm.jobName" :disabled="isDisabled" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招聘类型:" prop="department">
                <el-select
                  v-model="ruleForm.recruitmentType"
                  :disabled="isDisabled"
                >
                  <el-option
                    v-for="item in sys_recruitment_type"
                    :key="item.value"
                    :label="item.label"
                    :value="Number(item.value)"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="职级:" prop="time">
                <el-input
                  v-model="ruleForm.positionLevel"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="薪酬范围:" prop="personnel">
                <el-input
                  v-model="ruleForm.salaryRange"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="岗位职责:" prop="personnel">
            <!-- 岗位职责 -->

            <el-input
              :disabled="isDisabled"
              type="text"
              class="big-input"
              v-model="ruleForm.jobResponsibilities"
            />
          </el-form-item>

          <el-form-item label="任职条件:" prop="personnel">
            <!-- 任职条件 -->
            <el-input
              :disabled="isDisabled"
              type="text"
              class="big-input"
              v-model="ruleForm.qualification"
            />
          </el-form-item>

          <el-form-item label="岗位关键词:" prop="jobKeywords">
            <!-- 任职条件 -->
            <el-input
              :disabled="isDisabled"
              class="big-input"
              v-model="ruleForm.jobKeywords"
            />
          </el-form-item>
          <!-- 岗位信息描述文件 -->

          <el-form-item
            label="岗位信息描述文件:"
            prop="personnel"
            label-position="top"
          >
            <attachment
              v-if="ruleForm.file && ruleForm.file != null"
              :employeeResignFileVoList="ruleForm.file"
            ></attachment>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="需求人数:"
                prop="requirePersonNumber"
                required
              >
                <el-input
                  v-model="ruleForm.requirePersonNumber"
                  :disabled="isDisabled"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="需求紧急程度:" prop="personnel" required>
                <div
                  :style="{
                    color:
                      ruleForm.requireEmergencyLevel == 0
                        ? 'rgba(54, 162, 235)'
                        : ruleForm.requireEmergencyLevel == 1
                        ? 'rgba(245, 154, 35)'
                        : 'rgba(255, 49, 49)',
                  }"
                >
                  {{
                    ruleForm.requireEmergencyLevel == 0
                      ? "一般"
                      : ruleForm.requireEmergencyLevel == 1
                      ? "紧急"
                      : "非常紧急"
                  }}
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="期望到岗日期:" prop="startDate" required>
                <el-date-picker
                  :disabled="isDisabled"
                  v-model="ruleForm.hopeArrivalTime"
                  type="date"
                  placeholder="请选择期望到岗日期"
                  :picker-options="pickerOptionsStart"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="截止日期:" prop="endDate" required>
                <el-date-picker
                  :disabled="isDisabled"
                  v-model="ruleForm.closeTime"
                  type="date"
                  placeholder="请选择截止日期"
                  :picker-options="pickerOptionsEnd"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="是否是特殊岗位：">
            <el-radio-group
              v-model="ruleForm.isSpecialPosition"
              :disabled="isDisabled"
            >
              <el-radio :label="0" size="large">是</el-radio>
              <el-radio :label="1" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="薪资福利:" prop="salaryWelfare">
            <div>
              <el-input
                type="textarea"
                class="big-input"
                v-model="ruleForm.salaryWelfare"
              />
            </div>
          </el-form-item>
        </el-form>
      </div>

      <div class="bottom-btns">
        <div class="btns">
          <div class="back-btn">
            <el-button type="primary" round @click="handleSave">保存</el-button>
            <el-button type="info" round @click="$GoBack">取消</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="flowtab_info" v-if="flowableDataList.length > 0">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="流程过程" name="流程过程">
          <div class="flowProcess">
            <steps
              :flowableDataList="flowableDataList"
              @close="$GoBack"
            ></steps>
          </div>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="流程图">
          <bpmnViewer :flowData="flowDatas" :id="hightlightId" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
import {
  demandDetailsInfo,
  demandDetailsEdit,
} from "@/api/demandDetails/index.js";
import {
  flowablePhoto,
  flowableRecord,
} from "@/api/flowableApi/flowableApi.js";
import { ElMessage } from "element-plus";
import bpmnViewer from "../../../../components/Process/viewer/index.vue";
import attachment from "@/components/attachment.vue";
import steps from "@/components/step/index.vue";

const { proxy } = getCurrentInstance();
const { sys_recruitment_type, sys_is_special, flow_key } = proxy.useDict(
  "sys_recruitment_type",
  "sys_is_special",
  "flow_key"
);
const route = useRoute();
const activeName = ref("流程过程");
const isDisabled = ref(true);
const ruleFormRef = ref(null);
// 岗位需求描述信息
const ruleForm = ref({
  //需求人数
  requirePersonNumber: "",
  //岗位紧急程度
  requireEmergencyLevel: "",
  //希望到岗日期
  hopeArrivalTime: "",
  //截止日期
  closeTime: "",
  //岗位状态 0开启，1关闭
  jobStatus: "",
  // 岗位职责
  jobResponsibilities: "",
  //岗位需求描述
  requireJoboverview: "",
  //需求申请人
  requireProposerId: "",
  requireProposerName: "",
  //需求部门
  requireDeptId: "",
  requireDeptName: "",
  //申请日期
  proposeTime: "",
  //hr
  hrId: "",
  hrName: "",
  // 任职条件
  qualification: "",
  // 岗位关键词
  jobKeywords: "",
  //岗位描述文件
  file: "",
  id: "",
  //岗位名称
  jobName: "",
  // 招聘类型
  recruitmentType: "",
  // 职级
  positionLevel: "",
  // 薪酬范围
  salaryRange: "",
  salaryWelfare: "",
  reviewOpinionsList: [],

  isSpecialPosition: "", //是否特殊岗位
});
// 监听isSpecialPosition的变化
watch(
  () => ruleForm.isSpecialPosition,
  (newValue) => {
    console.log("isSpecialPosition changed to:", newValue);
  }
);

const rules = {
  salaryWelfare: [
    {
      required: true,
      message: "请填写薪资福利",
      trigger: "blur",
    },
  ],
};

// 留痕数据
const flowableDataList = ref([]);
const flowDatas = ref([]);
// 高亮节点id
const hightlightId = ref("");
// 审核按钮
const flowableBtns = ref([]);
// 下一个审批数据
const flowableTodoData = ref([]);
// 路径
const baseUrl = import.meta.env.VITE_APP_BASE_API;

const pickerOptionsStart = {
  disabledDate: (time) => {
    if (formInfo.value.endDate) {
      return time.getTime() > new Date(formInfo.value.endDate).getTime();
    }
  },
};

const pickerOptionsEnd = {
  disabledDate: (time) => {
    if (formInfo.value.startDate) {
      return (
        time.getTime() <
        new Date(formInfo.value.startDate).getTime() - 1 * 24 * 60 * 60 * 1000
      );
    }
  },
};
onMounted(() => {
  getDemandDetailsInfo();
  if (route.query.processId) {
    init(route.query.processId);
  }
});
const init = async (processId) => {
  try {
    // 留痕
    const recordRes = await flowableRecord({
      procInsId: processId,
      flowKey: "RECRUIT_DEMAND",
    });
    if (recordRes.data.flowList.length > 0) {
      recordRes.data.flowList.sort((a, b) => {
        return Number(b.taskId) - Number(a.taskId) < 0;
      });
      flowableDataList.value = recordRes.data.flowList;
      if (flowableDataList.value.length > 0) {
        nextTick(() => {
          let x = document.querySelectorAll(".el-step__icon-inner");
          x.forEach((item, index) => {
            item.innerHTML = x.length - index;
          });
        });
      }
    }
  } catch (error) {
    console.error(error);
  }
};
const handleClick = (tab) => {
  if (tab.props.name == "流程图") {
    flowablePhoto({
      procInsId: route.query.processId,
      flowKey: "RECRUIT_DEMAND",
    }).then((res) => {
      flowDatas.value = res.data;
      hightlightId.value = res.data.nodeData[res.data.nodeData.length - 1].key;
    });
  }
};
const getDemandDetailsInfo = async () => {
  const res = await demandDetailsInfo(proxy.$route.query.id);
  if (res.data) {
    Object.keys(res.data).forEach((item) => {
      if (res.data[item]) {
        ruleForm.value[item] = res.data[item];
        // ruleForm.jobStatus
        ruleForm.value.recruitmentType = res.data.recruitmentType;
        ruleForm.value.jobStatus = res.data.jobStatus;
      }
    });
  }
};
// 保存
const handleSave = () => {
  console.log(ruleForm.value, "ruleForm.value");
  proxy.$refs["ruleFormRef"].validate(async (valid) => {
    if (valid) {
      let params = {
        id: ruleForm.value.id,
        salaryWelfare: ruleForm.value.salaryWelfare,
        isStart: null,
      };
      demandDetailsEdit(params).then((res) => {
        if (res.code == 200) {
          ElMessage.success("保存成功");
          proxy.$GoBack();
        }
      });
    }
  });
};
// 文件查看
const fileView = (filePath) => {
  window.open(`${baseUrl}${filePath}`);
};
// 文件名回显
const extractFileName = (filePath) => {
  // 分割路径以获取文件名部分
  const parts = filePath.split("/");
  const fileNameWithSuffix = parts[parts.length - 1];

  // 分割文件名和扩展名
  const [fileName, fileExtension] = fileNameWithSuffix.split(".");

  // 检查文件名是否包含下划线
  const fileNameParts = fileName.split("_");
  if (fileNameParts.length > 1) {
    // 去除最后一个下划线及其后的部分
    const coreFileName = fileNameParts.slice(0, -1).join("_");
    return `${coreFileName}.${fileExtension}`;
  }

  // 如果没有下划线，返回原始文件名
  return fileNameWithSuffix;
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/btn.scss";
@import "@/assets/styles/form.scss";

.DemanView_title {
  display: flex;
  align-items: center;
  width: 50%;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 10px 0;
  padding-top: 10px;

  .borders {
    width: 4px;
    height: 18px;
    border-radius: 5px;
    background: rgb(245, 154, 88);
    margin: 0 5px;
  }
}

@import "@/assets/styles/form.scss";

.demo-tabs {
  .step-content {
    border: 1px solid rgb(242, 242, 242);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 5px 15px;
    margin: 15px 0;

    .step-title {
      color: #000;
      font-size: 15px;
      font-weight: bold;
      border-bottom: 1px solid rgb(242, 242, 242);
      padding-bottom: 5px;
    }

    .user-time {
      color: #000;
      margin-top: 5px;
      font-size: 14px;

      .user {
        .name {
          font-weight: bold;
        }
      }

      .user,
      .time,
      .workText,
      .workBtn {
        margin: 10px 0;
      }

      .workBtn {
        display: flex;
        margin-top: 14px;
        justify-content: space-between;

        .el-button {
          margin-left: 8px !important;
          width: 74px;
        }

        .el-button:first-child {
          margin-left: 0 !important;
        }
      }
    }
  }
}
.station_status {
  width: 100px;
  margin: 0 10px;
  text-align: center;
  border-radius: 4px;
  // border: none;
}

.status-recruiting {
  background-color: #e8f5e9;
  /* 浅绿色背景 */
  color: #2e7d32;
  // border: none;
  /* 深绿色文字 */
}

.status-closed {
  background-color: #f5f5f5;
  /* 浅灰色背景 */
  color: #757575;
  /* 深灰色文字 */
}

.flowProcess {
  height: 100%;
}

.needNotesJob {
  .title_lineJob {
    .lineJob {
      width: 2px;
      height: 20px;
      background: rgba(245, 154, 35);
      margin-right: 10px;
    }

    .titleJob {
      font-size: 16px;
      font-weight: bold;
      color: rgb(102, 102, 102);
    }
  }

  .text {
    color: #fff;
    font-size: 13px;
    padding: 5px;
    height: 32px;
    width: 76px;
    line-height: 22px;
    border-radius: 4px;
    text-align: center;
  }

  .color1 {
    background: rgb(245, 154, 35);
  }

  .color2 {
    background: rgb(132, 0, 255);
  }

  .isNo {
    width: 43px;
    height: 28px;
    border-radius: 8px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    margin: 0 10px;
    cursor: pointer;
  }

  .isColor {
    background: rgb(107, 202, 0);
  }

  .noColor {
    background: rgb(250, 75, 81);
  }
}

.post {
  display: flex;
  margin-top: 10px;
}

.needNotesJob {
  .title_lineJob {
    .lineJob {
      width: 2px;
      height: 20px;
      background: rgba(245, 154, 35);
      margin-right: 10px;
    }

    .titleJob {
      font-size: 16px;
      font-weight: bold;
      color: rgb(102, 102, 102);
    }
  }

  .text {
    color: #fff;
    font-size: 13px;
    padding: 5px;
    height: 32px;
    width: 76px;
    line-height: 22px;
    border-radius: 4px;
    text-align: center;
  }

  .color1 {
    background: rgb(245, 154, 35);
  }

  .color2 {
    background: rgb(132, 0, 255);
  }

  .isNo {
    width: 43px;
    height: 28px;
    border-radius: 8px;
    line-height: 28px;
    text-align: center;
    color: #fff;
    margin: 0 10px;
    cursor: pointer;
  }

  .isColor {
    background: rgb(107, 202, 0);
  }

  .noColor {
    background: rgb(250, 75, 81);
  }
}
:deep(.el-form) {
  max-width: 100% !important;
  padding-left: 20px;
}

:deep(.el-input__wrapper, .el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}

:deep(.el-textarea__inner) {
  // box-shadow: none !important;
  // background: white !important;
}

:deep(.el-form-item) {
  margin-bottom: 16px;
}

:deep(.el-select__suffix) {
  display: none;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}

:deep(.el-input.is-disabled) {
  width: 100%;
  cursor: auto;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}

:deep(.el-step.is-vertical .el-step__line) {
  bottom: -25px;
  left: 11px;
  top: 15px;
  width: 2px;
}
.status-tag {
  margin-left: 5px;
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.recruiting {
  background-color: #e1f3e1;
  color: #33d170;
  border: 1px solid #33d170;
}

.closed {
  background-color: #f5f5f5;
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
}

.avatar-uploader-text {
  max-width: 180px; /* 设置最大宽度 */
  white-space: nowrap; /* 防止文字换行 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */

  color: #409eff;
  text-decoration: none;
  cursor: pointer;
}

.avatar-uploader-text:hover {
  text-decoration: underline;
}
</style>
